<script setup lang="ts">
import { fetchGetPersonAllNumber } from "@/api/screen/person";
import Echarts from "@/components/echartsTemplate/index.vue";
import { onMounted, reactive } from "vue";


const xData = reactive([])
const yData1 = reactive([])
const yData2 = reactive([])
const getSocietyData = async () => {
  const res = await fetchGetPersonAllNumber()
  res.data.forEach((item:any) => {
    xData.push(item.name)
    yData1.push(item.planNumber)
    yData2.push(item.nowNumber)
  })
}
onMounted(() => {
  getSocietyData()
})
const option = reactive({
  grid: { containLabel: true, right: 15, bottom: 0, left: 15 },
  legend: {
    show: true,
    right: '70',
    data: ['计划人数', '已招人数'],
    textStyle: { fontSize: 18, color: '#ffffff' },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "shadow" }
  },
  xAxis: {
    type: "category",
    data: xData,
    axisLine: {
      show: true,
      lineStyle: { color: "#7097B8", type: "solid" }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      interval: 0,
      show: true,
      fontSize: 14,
      color: "#7097B8",
      fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN"
    }
  },
  yAxis: [
    {
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        show: true,
        fontSize: 14,
        color: "#7097B8",
        fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
        formatter: '{value} 人'
      },
      splitLine: { show: false }
    },
    {
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        show: true,
        fontSize: 14,
        color: "#7097B8",
        fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
        formatter: '{value} %'
      },
      splitLine: { show: false }
    },
  ],
  series: [
    {
      name: '计划人数',
      type: "bar",
      barWidth: "20%",
      showBackground: true,
      backgroundStyle: {
        color: "rgba(14,58,99, .5)"
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0, // 右
          y: 1, // 下
          x2: 0, // 左
          y2: 0, // 上
          colorStops: [
            {
              offset: 0,
              color: "#83bff6", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#2378f7", // 90% 处的颜色
            },
          ],
        },
      },
      emphasis: {
        itemStyle: {
          color: {
            type: "linear",
            x: 0, // 右
            y: 1, // 下
            x2: 0, // 左
            y2: 0, // 上
            colorStops: [
              {
                offset: 0,
                color: "#83bff6", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#2378f7", // 90% 处的颜色
              },
            ],
          },
        }
      },
      data: yData1
    },
    {
      name: "已招人数",
      type: "line",
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          lineStyle: {
            color: "#FFA600", //改变折线颜色
          },
        },
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [  // 渐变颜色
            {
              offset: 0,
              color: 'rgba(255, 166, 0, 0.3)',
            },
            {
              offset: 1,
              color: 'rgba(255, 166, 0, 0.5)',
            },
          ],
          global: false,
        },
      },
      smooth: false,
      showAllSymbol: true,
      symbol: "emptyCircle",
      symbolSize: 6,
      data: yData2
    }

  ]
});
</script>

<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
